<template>
  <div class="video-preview">
    <el-dialog
      :title="'音乐播放' + ' - ' + title"
      :visible.sync="dialogVisible"
      width="600px"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :append-to-body="true"
      @closed="handleClose"
    >
      <div class="video-wrap">
        <div :class="['audio-pic', { play: playing }]"></div>
        <audio
          v-if="dialogVisible"
          :src="videoSrc"
          @pause="playing = false"
          @play="playing = true"
          @ended="playing = false"
          controls
        ></audio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      playing: false,
      title: '',
      videoSrc: '',
    }
  },
  mounted() {
    this.$bus.$on('showDialogAudioPreview', (v) => {
      let videoFormat = ['mp3']
      let curVideoType = v.attrSuffixStr.toLowerCase()
      if (videoFormat.indexOf(curVideoType) == -1) {
        this.$message({
          message: '抱歉，' + curVideoType + '格式文件不支持预览',
          type: 'warning',
        })
        return
      }
      this.title = v.oldName
      this.videoSrc = v.httpUrl
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('showDialogAudioPreview')
  },
  methods: {
    handleClose() {
      this.videoSrc = ''
      this.playing = false
      this.dialogVisible = false
    },
  },
}
</script>
<style scoped lang="scss">
.video-wrap {
  width: 100%;
  text-align: center;
  video {
    width: 100%;
    height: 100%;
  }
  .audio-pic {
    width: 100%;
    height: 260px;
    margin-bottom: 20px;
    background: url('./audio.png') no-repeat center;
    background-size: contain;
    &.play {
      animation: fadenum 10s linear infinite;
    }
  }
  @keyframes fadenum {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>